<template>
  <div>
    <vue3dLoader :autoPlay="autoPlay" :backgroundColor="detail.style.backColor"
                 :cameraPosition="{ x: 0, y: 10, z: 10 }"
                 :controlsOptions="{
                enablePan:detail.loader.enablePan,
                enableZoom:detail.loader.enableZoom,
                enableRotate:detail.loader.enableRotate,
            }"
                 :dampingFactor="0.1"
                 :enableDamping="true"
                 :filePath="detail.loader.filePath"
                 :height="detail.style.position.h"
                 :lights="lights"
                 :position="detail.loader.position"
                 :rotation="detail.loader.rotation"
                 :scale="detail.loader.scale"
                 :showFps="detail.loader.showFps" :width="detail.style.position.w" @load="onLoad()" @process="onProcess"/>
    <div v-if="isShow" class="process">
      current model: {{ currentModelIndex }}, loadding: {{ process + "%" }}
    </div>
  </div>
</template>

<script>
//:rotation="rotation"  @load="onLoad()"  :labels="labels"
//https://mp-bd83e627-0227-46f3-aef3-95bef99ce553.cdn.bspapp.com/CL/20221017140618_parent_directory_坦克01.gltf

import BaseView from './View';

export default {
  name: 'view-3D',
  components: {},
  extends: BaseView,
  props: {},
  data() {
    return {
      enablePan: true,//开启右键拖动
      enableZoom: true,//开启缩放
      enableRotate: true,//开启旋转
      autoPlay: true,//播放动画
      //自动旋转
      /*rotation: {
          x: -Math.PI / 2,
          y: 0,
          z: 0,
      },*/
      lights: [
        {
          type: "AmbientLight",
          color: "red",
        },
        {
          type: "DirectionalLight",
          position: {x: 100, y: 10, z: 100},
          color: "green",
          intensity: 0.8,
        },
        {
          type: "PointLight",
          color: "#000000",
          position: {x: 200, y: -200, z: 100},
          intensity: 1,
        },
        {
          type: "HemisphereLight",
          skyColor: "#00FF00",
          groundColor: "#000000",
          position: {x: 200, y: -200, z: 100},
        },
      ],
      labels: [
        {
          text: "温度：26°C",
          // image: "statics/topo/images/onLine.png",
          position: {x: 0, y: 2.5, z: 0},
          scale: {x: 2, y: 2, z: 0.6},
          textStyle: {
            fontFamily: "Arial",
            fontSize: 30,
            fontWeight: 600,
            lineHeight: 1,
            color: "#ffffff",
            borderWidth: 8,
            borderRadius: 0,
            borderColor: "#000000",
            backgroundColor: "rgba(0,0,0,1)",
          },
          sid: 3, // 自定义标识，可有可无
        }
      ],
      currentModelIndex: 0,
      process: 0,
      isShow: true,
      filePath: ['https://mp-bd83e627-0227-46f3-aef3-95bef99ce553.cdn.bspapp.com/CL/20221017140618_parent_directory_坦克01.gltf',
        'https://mp-bd83e627-0227-46f3-aef3-95bef99ce553.cdn.bspapp.com/CL/20221024093712_parent_directory_古建_房子12.gltf',
        'https://mp-bd83e627-0227-46f3-aef3-95bef99ce553.cdn.bspapp.com/CL/20221009162140_parent_directory_站台27.gltf'],
      position: [{x: -1.5, y: 0.5, z: 0.5}, {x: 0.5, y: 0.5, z: 0.5}, {x: -1.5, y: 0.5, z: -0.5}],
      rotation: [{x: 0, y: 0, z: 0}, {x: 0, y: 0, z: 0}, {x: 0, y: 0, z: 0}],
      scale: [{x: 0.2, y: 0.2, z: 0.2}, {x: 0.08, y: 0.08, z: 0.08}, {x: 0.1, y: 0.1, z: 0.1}]
    }
  },
  mounted() {
  },
  methods: {
    onProcess(event, index) {
      this.process = Math.floor((event.loaded / event.total) * 100);
      if (index != 0) {
        this.currentModelIndex = index;
      }
      if (this.process == 100) {
        setTimeout(() => {
          this.isShow = false;
        }, 500);
      }
    },
    onLoad() {
      if (this.detail.loader.authRoTate) {
        this.rotate();
      }
    },
    rotate() {
      requestAnimationFrame(this.rotate);
      this.detail.loader.rotation.forEach(element => {
        element.y += 0.01;
      });
    },
  }
}
</script>

<style lang="scss" scoped>
.view-image {
  height: 100%;
  width: 100%;
}

.modelClass {
  padding: 5px;
  background-color: aqua;
}

.process {
  position: absolute;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  padding: 3px 8px;
  background-color: aquamarine;
  color: red;
}
</style>
